<template>
	<view>
		<view class="tab_content home" :class="[keyName=='home'?'active':'']">
			<view class="content">
				<view class="head">
				</view>
				<view class="main">
					<view class="recommend">
						<image id="recommend" src="http://minipos.posyun3721.com/image/marketing/recommend.png">
						</image>
						<view v-if="hotList==''" style="text-align: center">商家暂未发布活动</view>
						<view v-else>
							<block v-for="(item, index) in hotList" :key="index" v-if="index<6">
								<view class="rec-box" @click="onHot" :data-type="item.AcType" :data-goodID="item.AcId"
									:data-goodsId="item.GoodsId">
									<view class="rec-img">
										<image class="rec-image" mode="aspectFit" :src="item.Img"></image>
										<view class="image-content">
											<text class="image-con-left"
												v-if="item.AcType==1">{{item.GroupQty}}人拼团</text>
											<text class="image-con-left" v-else-if="item.AcType==2"></text>
											<text class="image-con-left" v-else>砍到底！{{item.Price}}元带回家！</text>
											<view class="image-con-right">
												<view class="image-view">
													<image class="image-img"
														src="http://minipos.posyun3721.com/image/marketing/people-img2.png">
													</image>
													<text>{{item.ReadCount}}</text>
												</view>
												<view class="image-view">
													<image class="image-img"
														src="http://minipos.posyun3721.com/image/marketing/user.png">
													</image>
													<text>{{item.UsedQty}}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="rec-content">
										<view class="rec-title">
											<text
												:class="[item.AcType==1?'type1':(item.AcType==2?'type2':'type3')]">{{item.AcType==1?'拼团':(item.AcType==2?'秒杀':'砍价')}}</text>
											<text class="title">{{item.Title}}</text>
										</view>
										<view class="rec-originator">
											<view class="originator">
												<text class="orig-name">{{name}}</text>
											</view>
											<view class="money">
												<text>¥{{item.Price}}</text>
											</view>
										</view>
									</view>
									<view class="activity">
										<text>剩余：{{item.IvQty}}份</text>
									</view>
								</view>
							</block>
						</view>
					</view>
					<view class="recom select" v-if="merchant.length!=0">
						<view class="recom-head">
							<text class="recom-title">推荐商家</text>
						</view>
						<view class="recom-box" v-for="(item,index) in merchant" :key="index" :data-id="index"
							:data-title="item.FMiniProgramName" :data-Stockid="item.Stockid" bindtap="onRecom">
							<view class="recom-img">
								<image mode="aspectFit" :src="item.Img"></image>
								<view class="recom-content"></view>
								<view class="recom-content2">
									<image class="recom-cont"
										:src="[item.FHeadUrl!=''?item.FHeadUrl:'http://minipos.posyun3721.com/image/marketing/logo.jpg']">
									</image>
									<view class="recom-con">
										<text class="r-text recom-text">{{item.FName}}</text>
										<view class="r-con">
											<image src="/image/location.png"></image>
											<text class="recom-text">广东省广州市番禺区石楼镇莲港大道67号401房</text>
										</view>
									</view>
								</view>
							</view>
							<view class="rec-title recom-T">
								<text
									:class="[item.AcType==1?'type1':(item.AcType==2?'type2':'type3')]">{{item.AcType==1?'拼团':(item.AcType==2?'秒杀':'砍价')}}</text>
								<text class="title recom-text" style="width:560rpx;">{{item.Title}}</text>
							</view>
						</view>
					</view>
				</view>

				<dialog :class=" [FPhone==0?'':'none']" id='dialog' bind:confirmEvent='confirmEvent'
					bind:bindgetphonenumber='bindgetphonenumber'>
				</dialog>
			</view>

		</view>
		<view class="tab_content more" :class="[keyName=='more'?'active':'']">
			<view class="content">
				<view class="head">
					<view class="Type typeLeftBox">
						<view class="type-view" :class="[activeTypeId1==index?'active':'']"
							v-for="(item,index) in activData1" :key="index" :data-id="index" @tap="onActive">
							<text class="">{{item.title}}</text>
						</view>
					</view>
				</view>
				<view class="main">
					<!-- <swiper style="height: {{swiperHeight}}px" :duration="duration" :current="curIndex" -->
					<swiper :style="[{'height':swiperHeight}]" :duration="duration" :current="curIndex"
						@change='bindChange'>
						<swiper-item v-if="hotList2.length != 0">
							<block v-for="(item,index) in hotList2" :key="index">
								<!-- <template is="recommend" :data="item,name"></template> -->
								<view class="rec-box" @tap="onHot" :data-type="item.AcType" :data-goodID="item.AcId"
									:data-goodsId="item.GoodsId">
									<view class="rec-img">
										<image class="rec-image" mode="aspectFit" :src="item.Img"></image>
										<view class="image-content">
											<text class="image-con-left"
												v-if="item.AcType==1">{{item.GroupQty}}人拼团</text>
											<text class="image-con-left" v-else-if="item.AcType==2"></text>
											<text class="image-con-left" v-else>砍到底！0元带回家！</text>
											<view class="image-con-right">
												<view class="image-view">
													<image class="image-img"
														src="http://minipos.posyun3721.com/image/marketing/people-img2.png">
													</image>
													<text>{{item.ReadCount}}</text>
												</view>
												<view class="image-view">
													<image class="image-img"
														src="http://minipos.posyun3721.com/image/marketing/user.png">
													</image>
													<text>{{item.UsedQty}}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="rec-content">
										<view class="rec-title">
											<text
												:class="[item.AcType==1?'type1':(item.AcType==2?'type2':'type3')]">{{item.AcType==1?'拼团':(item.AcType==2?'秒杀':'砍价')}}</text>
											<text class="title">{{item.Title}}</text>
										</view>
										<view class="rec-originator">
											<view class="originator">
												<!-- <image class="orig-image" src="{{item.UserImg}}"></image> -->
												<text class="orig-name">{{name}}</text>
											</view>
											<view class="money">
												<text>¥{{item.Price}}</text>
												<!-- <button class="but">立即抢购</button> -->
											</view>
										</view>
									</view>
									<view class="activity">
										<text>剩余：{{item.IvQty}}份</text>
									</view>
								</view>
							</block>
						</swiper-item>
						<swiper-item v-else>
							<text>暂无活动</text>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="tab_content my" :class="[keyName=='my'?'active':'']">
			<view class="content">
				<view class="head">
					<view class="userinfo">
						<view class="userinfo-con1">
							<!-- <image id="portrait" v-if="loginID!=0" :src="userInfo.avatarUrl"></image> -->
							<view id="portrait">
								<open-data type="userAvatarUrl"></open-data>
							</view>

							<!-- <image id="portrait" v-else src="http://minipos.posyun3721.com/image/marketing/login.png"> -->
							</image>
							<view class="userinfo-text">
								<!-- <text class="text1" :class="[loginID!=0?'':'none']">{{userInfo.nickName}}</text> -->
								<!-- <button class="{{admin==0?'none':''}}" id="store" value="" bindtap="onStore">我的店铺</button> -->
								<open-data class="text1" type="userNickName"></open-data>
							</view>
							<view class="userinfo-text">
								<text class="text3" :class="[loginID!=0?'':'none']">微信用户</text>
								<!-- <navigator hover-class="none" url="/pages/aboutUs/setUp/setUp"> -->
								<!-- <text class="text4" bindtap="notLogin">设置</text> -->
								<!-- </navigator> -->
							</view>
							<view :class="[loginID==0?'':'none']" id="login" @tap="onLoginto">请先登录</view>
						</view>
						<view class="userinfo-con2">
							<!-- <navigator hover-class="none" url="/pages/Marketing/aboutUs/footprint/footprint">
			          <view class="classif">
			            <text>{{callNumber}}</text>
			            <text>足迹</text>
			          </view>
			        </navigator> -->
							<!-- <view class="vertical"></view> -->
							<navigator hover-class="none" url="/pages/Marketing/aboutUs/collection/collection">
								<view class="classif">
									<text>{{callNumber}}</text>
									<text>收藏</text>
								</view>
							</navigator>
							<view class="vertical"></view>
							<navigator hover-class="none" url="/pages/Marketing/aboutUs/attention/attention">
								<view class="classif">
									<text>{{attention}}</text>
									<text>关注</text>
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view class="main">
					<navigator hover-class="none" url="/pages/Marketing/aboutUs/order/order?id=0">
						<view class="activity">
							<text>我的活动</text>
							<image class="imgRight" src="http://minipos.posyun3721.com/image/marketing/right.png">
							</image>
							<text>全部订单</text>
						</view>
					</navigator>
					<view class="divider"></view>
					<view class="activity-classif">
						<navigator hover-class="none" url="/pages/Marketing/aboutUs/order/order?id=0">
							<view class="activity-box1">
								<image class="activity-img"
									src="http://minipos.posyun3721.com/image/marketing/spell.png"></image>
								<text>我的拼团</text>
							</view>
						</navigator>
						<navigator hover-class="none" url="/pages/Marketing/aboutUs/order/order?id=1">
							<view class="activity-box1">
								<image class="activity-img"
									src="http://minipos.posyun3721.com/image/marketing/seckill.png"></image>
								<text>我的秒杀</text>
							</view>
						</navigator>
						<navigator hover-class="none" url="/pages/Marketing/aboutUs/order/order?id=2">
							<view class="activity-box1">
								<image class="activity-img"
									src="http://minipos.posyun3721.com/image/marketing/bargain.png"></image>
								<text>我的砍价</text>
							</view>
						</navigator>
					</view>
					<view class="activity-current none" :class="[loginID!=0?'':'none']">
						<image class="current-img" src="http://minipos.posyun3721.com/image/marketing//spell.png">
						</image>
						<text class="title">拼单仅剩<text class="time">{{days}} : {{hours}} : {{minutes}} :
								{{seconds}}</text></text>
						<button class="current" @tap="onInvite">邀请拼单</button>
					</view>
					<view class="activity-classif2">
						<navigator open-type="reLaunch" hover-class="none" url="/pages/user/MemberUser">
							<view class="activity-box2">
								<image class="imgLeft" src="../../../static/member1.png"></image>
								<text>会员中心</text>
								<image class="imgRight" src="http://minipos.posyun3721.com/image/marketing//right.png">
								</image>
							</view>
						</navigator>
						<navigator hover-class="none" url="/pages/Marketing/aboutUs/address/address">
							<view class="activity-box2">
								<image class="imgLeft" src="../../../static/address.png"></image>
								<text>我的地址</text>
								<image class="imgRight" src="http://minipos.posyun3721.com/image/marketing/right.png">
								</image>
							</view>
						</navigator>
						<navigator hover-class="none" url="/pages/Marketing/aboutUs/about/about">
							<view class="activity-box2">
								<image class="imgLeft" src="../../../static/about.png"></image>
								<text>关于我们</text>
								<image class="imgRight" src="http://minipos.posyun3721.com/image/marketing/right.png">
								</image>
							</view>
						</navigator>
					</view>
				</view>
			</view>

			<dialog :class="[FPhone==0?'':'none']" id='dialog' bind:confirmEvent='confirmEvent'
				bind:bindgetphonenumber='bindgetphonenumber'>
			</dialog>
		</view>
		<view class="uni-tabbar">
			<view class="tab_border"></view>
			<view class="uni-tabbar__item" v-for="(item,index) in tabData" @click="tab_event(item.keyName)">
				<uni-icons :type="item.icon" :color="[item.keyName==keyName?'darkorange':'#ccc']" size="32"></uni-icons>
				<view class="uni-tabbar__label" :class="[item.keyName==keyName?'darkorange':'#ccc']">
					{{item.Name}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import recommend from '@/components/template/recommend.vue';
	let loginID = ''; //登录的状态码 0=>未登录 1=>已登录
	let list1 = [],
		list2 = [],
		list3 = [];
	export default {
		components: {
			recommend
		},
		data() {
			return {
				keyName: 'home',
				tabData: [{
					id: 1,
					keyName: 'home',
					icon: 'home',
					Name: '首页'
				}, {
					id: 2,
					keyName: 'more',
					icon: 'shop',
					Name: '更多'
				}, {
					id: 3,
					keyName: 'my',
					icon: 'contact',
					Name: '我的'
				}],
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				hotListType: '',
				hotList: [{
					AcType: 1, //类型
					Title: '限定【奶茶猫】特制芝士奶盖草莓果茶', //标题
					Img: 'http://minipos.posyun3721.com/image/Marketing/rec1.png', //商品图片
					userImg: '/image/Marketing/login.png', //活动发起人头像
					userName: '嘿嘿嘿', //活动发起人名称
					ReadCount: 7553, //浏览人数
					UsedQty: 5891, //参与人数   
					price: 258, //价格
					IvQty: 352, //剩余商品数量
					GroupQty: 3,
					Price: 1,
					Price: 0.01
				}, {
					AcType: 2, //类型
					Title: '爱you创意千层甜品8寸千层提拉米苏！', //标题
					Img: 'http://minipos.posyun3721.com/image/Marketing/rec1.png', //商品图片
					userImg: '', //活动发起人头像
					userName: '哈哈哈', //活动发起人名称
					ReadCount: 651, //浏览人数
					UsedQty: 622, //参与人数   
					price: 45, //价格
					IvQty: 52, //剩余商品数量
					GroupQty: 3,
					Price: 1,
					Price: 0.01
				}, {
					AcType: 3, //类型
					Title: '爱you创意千层甜品8寸千层提拉米苏！', //标题
					Img: 'http://minipos.posyun3721.com/image/Marketing/rec1.png', //商品图片
					userImg: '', //活动发起人头像
					userName: '嗯嗯额', //活动发起人名称
					ReadCount: 1548, //浏览人数
					UsedQty: 1203, //参与人数   
					price: 530, //价格
					IvQty: 32, //剩余商品数量
					GroupQty: 3,
					Price: 1,
					Price: 0.01
				}, ], //热门推荐列表
				navID: 0, //导航id
				FPhone: 1, //
				// isBeGranted: 1,
				FItemID: '', //当前店铺的FItemID
				parentID: '', //推荐人id
				bargainList: '', //砍价列表
				acid: '',
				name: '',
				merchant: [], //推荐商家
				//更多页面数据==========================
				list: ["全部活动", ""],
				curIndex: 0,
				duration: 300,
				heigth: '',
				navID: 1,
				layer: 0, //
				activeTypeId1: 0,
				activTypeBox: 0,
				title: '',
				activData1: [{
					title: '全部活动',
				}, {
					title: '拼团',
				}, {
					title: '砍价',
				}, {
					title: '秒杀',
				}], //
				hotList2: '',
				All: '', //
				Spellgroup: '', //拼团
				Bargain: '', //砍价
				Seckill: '', //秒杀
				swiperHeight: '',
				name: '',
				//我的页面==============================
				src: '', //
				loginID: 0, //登录的状态 0=>未登录 1=>已登录 
				layerID: 0, //登录弹出层状态 0=>隐藏 1=>显示
				isBeGranted: 1, //获取信息
				FPhone: 1, //是否有电话号码
				userInfo: '', //用户信息
				days: 0, //天
				hours: 0, //时
				minutes: 0, //分
				seconds: 0, //秒
				footprint: 0, //足迹
				collection: 0, //收藏
				attention: 0, //关注
				navID: 2,
				admin: 0, //判断当前用户是否是该公司的管理人员
				callNumber: 0, //收藏  足迹
				canIUseOpenData: uni.canIUse('open-data.type.userAvatarUrl') && uni.canIUse('open-data.type.userNickName')
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中',
			});
			var self = this,
				nowHostid = '';
				
			if (options) {
				if (options.FItemID) {
					this.FItemID = options.FItemID;
					this.parentID = options.parentID;
					//判断去哪个入口数据库
					var lastHostid = uni.getStorageSync('hostid');
					if (lastHostid != '') {
						if (lastHostid != nowHostid) {
							// login = 0;
							uni.setStorageSync('hostid', options.hostid); //新的
							uni.setStorageSync('lastHostid', lastHostid); //旧的
						}
						uni.setStorageSync('FItemID', options.FItemID);
						uni.setStorageSync('stockId', options.FItemID)
						uni.setStorageSync('parentID', options.parentID);
					} else {
						uni.setStorageSync('hostid', options.hostid);
						uni.setStorageSync('stockId', options.FItemID)
						uni.setStorageSync('FItemID', options.FItemID);
					}
				} else {
					var lastFItemID = uni.getStorageSync('FItemID');
					var lastHostid = uni.getStorageSync('hostid');
					var parentID = uni.getStorageSync('parentID');
					//console.log(lastFItemID);
					if (lastFItemID != '') {
						this.FItemID = lastFItemID;
						this.hostid = lastHostid;
						this.parentID = parentID;
					}
				}
			}
		},

		onShow: function() {
			uni.showLoading({
				title: '加载中，请稍后',
			})
			let recordId = uni.getStorageSync('Recordid')
			if (recordId == 1) {
				uni.setStorageSync('Recordid', 0)
			}
			let tiems = '';
			let LID = uni.getStorageSync('LoginID');
			loginID = LID;
			this.loginID = loginID;
			if (loginID != 1) {
				this.onLong();
			}else{
				this.callback();
			}

			//更多=====================
			// let self = this,
			// 	lastFItemID = uni.getStorageSync('FItemID');
			// //绑定当前门店
			// this.$util.util('WeChatShop/GetStockById', {
			// 	StockId: lastFItemID
			// }, 'GET').then(res => {
			// 	this.name = res[0].FCorpName;
			// 	this.ac2();
			// }).catch(error => {
			// 	//console.log(error);
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: error.data.msg,
			// 	})
			// })
		},
		methods: {
			tab_event: function(tab) {
				this.keyName = tab;
			},
			//登录
			onLong() {
				let self = this;
				uni.login({ //登录
					success: res => {
						let code = res.code;
						debugger
						this.$util.Login2(code).then(res => {
							if (res == 1) {
								let phone = uni.getStorageSync('Phone');
								let phoneID = phone !== '' ? 1 : 0;
								uni.setStorageSync('LoginID', res);
								//console.log('login', res, phoneID);
								loginID = res;
								this.loginID = loginID;
								this.FPhone = phoneID;
								self.callback();
							} else {
								loginID = 0;
								this.loginID = loginID;
								uni.showModal({
									content: '請前往個人中心登錄',
									success: res => {
										if (res.confirm) {
											uni.reLaunch({
												url: '/pages/Member/login/login',
											})
										}
									},
								})
								uni.setStorageSync('LoginID', 0);
							}
						}) //.catch(error=>//console.log(error));
					}
				})
			},
			//方法/功能的使用
			callback: function() {
				this.$util.GetTitle();
				//绑定当前门店
				this.$util.util('WeChatShop/GetStockById', {
					StockId: uni.getStorageSync('stockId')
				}, 'GET').then(res => {
					//console.log(res);
					uni.setStorageSync('CorpID', res[0].FCorpID);
					uni.setStorageSync('CorpName', res[0].FCorpName);
					this.name = res[0].FCorpName;
					this.ac();
				}).catch(error => {
					this.hotList = '';
				});

				var lastFItemID = uni.getStorageSync('FItemID');
				// this.$util.onjudge(lastFItemID).then(res => {
				// 	this.ass();
				// })
				this.ass();

				if (loginID !== 1) {
					this.src = '/image/Marketing/login.png';
				}
				// this.$util.util('Marketing/ShopUser', {}, 'POST').then(res => {
				// 	//console.log(res);
				// 	this.admin = 1;
				// }).catch(error => {
				// 	//console.log(error)
				// 	this.admin = 0;
				// });
				this.oncoll();
			},
			ac: async function() {
				let arr = [];
				let liseA = await this.$util.aprom('Sale/GetGroupSale');
				let liseB = await this.$util.aprom('Sale/GetCutPrice');
				// let liseC = await this.$util.aprom('Sale/GetSeckillGoodsList');
				this.$util.aprom('Sale/GetSeckillGoodsList').then(res => {
					//console.log(res)
					arr = liseA.concat(liseB, res);
					for (var i in arr) { //按时间先后排列
						arr = arr.sort(function(a, b) {
							return Date.parse(b.BeginTime.replace(/-/g, "/")) - Date.parse(a.BeginTime
								.replace(/-/g, "/"));
						})
					}
					if (arr == '' || arr.length == 0) {
						arr = '';
					}
					this.hotList = arr;
					this.hotList2 = arr;
					list1 = liseA;
					list2 = liseB;
					list3 = res;
					this.swiperHenght(arr);
					uni.hideLoading();
				}) //.catch(error=>//console.log(error));
			},
			ac2: async function() {
				let arr = [];
				let liseA = await this.$util.aprom('Sale/GetGroupSale');
				let liseB = await this.$util.aprom('Sale/GetCutPrice');
				let liseC = await this.$util.aprom('Sale/GetSeckillGoodsList');
				//console.log('活动', liseA, liseB, liseC)
				arr = liseA.concat(liseB, liseC);
				//console.log(arr);
				for (var i in arr) {
					arr = arr.sort(function(a, b) {
						return Date.parse(b.BeginTime.replace(/-/g, "/")) - Date.parse(a.BeginTime.replace(
							/-/g, "/"));
					})
				}
				if (arr == '' || arr.length == 0) {
					arr = '';
				}
				list1 = liseA;
				list2 = liseB;
				list3 = liseC;
				this.hotList2 = arr;
				this.swiperHenght(arr);
				uni.hideLoading();
			},
			//热门推荐跳转
			onHot: function(e) {
				var type = e.currentTarget.dataset.type;
				var selectid = e.currentTarget.dataset.type;
				var googId = e.currentTarget.dataset.goodid;
				var GoodsId = e.currentTarget.dataset.goodsid;
				type = type == 1 ? '0' : (type == 2 ? '1' : '2')
				uni.setStorageSync('GoodsId', GoodsId);
				//console.log(type, googId);
				if (loginID == 1) {
					uni.navigateTo({
						url: '/pages/Marketing/index/select/select' + selectid + '/select' + selectid +
							'?id=' + type + '&groupId=' +
							googId,
						fail: err => {
							//console.log(err);
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录，请先去我的界面登录!!',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/Member/login/login',
								})
							}
						}
					})
				}

			}, //选择活动类型
			clicktab(e) {
				//console.log(e);
				var index = e.target.dataset.index;
				var id = parseInt(index) + 1;
				if (index == 0) {
					this.swiperHenght(this.hotList2);
				} else {
					let arr = [];
					this.swiperHenght(arr);
				}
				this.curIndex = index;
				this.activTypeBox = id;
				this.layer = 1;
			},
			bindChange: function(e) {
				this.curIndex = e.detail.current;
			},
			//选择活动类型
			onActive: function(e) {
				let typeID = e.currentTarget.dataset.id;
				let table = '';
				if (typeID != 0) {
					typeID == 1 ? table = list1 : (typeID == 2 ? table = list2 : table = list3)
				} else {
					table = list1.concat(list2, list3);
					for (var i in table) {
						table = table.sort(function(a, b) {
							return Date.parse(b.BeginTime.replace(/-/g, "/")) - Date.parse(a.BeginTime.replace(
								/-/g, "/"));
						})
					}
				}
				this.swiperHenght(table)
				this.activeTypeId1 = typeID;
				this.activTypeBox = 0;
				this.hotList2 = table;
			},

			onTypelayer: function() {
				this.layer = 0;
				this.activTypeBox = 0;
			},
			//倒计时
			onCountdown: function(endDateStr) {
				var self = this;
				var data = this.$util.onCountdown(endDateStr);
				// //console.log(data);
				this.days = data.days;
				this.hours = data.hours;
				this.minutes = data.minutes;
				this.seconds = data.seconds;
				//延迟一秒执行自己
				var t = setTimeout(function() {
					self.onCountdown(endDateStr);
				}, 1000)
				if (data.type == 1) {
					clearTimeout(t)
				}
				if (data.days == 0 && data.hours == 0 && data.minutes == 0 && data.seconds == 0) {
					return 1;
				}
			},
			ass: function() {
				let self = this;
				let t = '';
				let userInfo = uni.getStorageSync('MuserInfo');
				if (userInfo == null) {
					t = setTimeout(function() {
						self.ass();
					}, 1000);
				} else {
					clearTimeout(t);
					uni.setStorageSync('MuserInfo', userInfo)
					self.userInfo = userInfo;
					uni.hideLoading();
				}
			},
			oncoll: function() {
				let url = 'Sale/GetMemberCollect',
					data = {
						page: 1,
						size: 5
					};
				this.$util.util(url, data, 'POST').then(res => {
					//console.log(res);
					this.callNumber = res.length;
				}) //.catch(error=>//console.log(error));
			}, //登录弹出层
			onLoginto: function() {
				uni.navigateTo({
					url: '/pages/public/login',
				})
			},
			//动态高度
			swiperHenght: function(list) {
				let self = this;
				let number = list.length == 0 ? '1' : list.length;
				const query = uni.createSelectorQuery()
				query.select('.rec-box').boundingClientRect()
				query.exec(function(res) {
					let height;
					if (res[0] == null) {
						height = 257;
					} else {
						height = 257 //res[0].height;
					}
					let sumHeigth = (height + 15) * number;
					self.swiperHeight = sumHeigth + 'px';
				})
			},
		}
	}
</script>

<style lang="scss">
	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video {
		-webkit-box-sizing: border-box;
		box-sizing: initial;
	}

	.active {
		display: block !important;
	}

	.tab_content {
		display: none;
	}

	.uni-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
	}

	.tab_border {
		background-color: #CCCCCC;
		height: 3rpx;
		width: 100%;
		position: absolute;
	}

	.uni-tabbar__item {
		text-align: center;
		display: block;
		width: 100%;
		padding-top: 8rpx;
	}

	.uni-tabbar__label {}

	.uni-tabbar__label.color {
		color: #cccccc;
	}

	.uni-tabbar__label.darkorange {
		color: darkorange;
	}

	.home {
		.content {
			width: 100%;
			height: auto;
		}

		.head {
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
		}

		.head-box>image {
			width: 60rpx;
			height: 60rpx;
			margin: 16rpx auto 22rpx auto;
			border-radius: 50%;
			display: block;
		}

		.head-box>text {
			font-size: 28rpx;
			color: #969696;
			text-align: center;
			display: block;
		}

		.region {
			width: 100%;
			height: auto;
			margin-bottom: 42rpx;
		}

		#location {
			width: 32rpx;
			height: 40rpx;
			margin: 5rpx 20rpx 0 48rpx;
			display: block;
			float: left;
		}

		.region-name {
			color: #FF892E;
			font-size: 32rpx;
			line-height: 42rpx;
		}

		.search {
			width: 100%;
			height: auto;
			position: relative;
		}

		.search-img {
			width: 40rpx;
			height: 40rpx;
			padding: 12rpx 14rpx 8rpx 14rpx;
			display: block;
			position: absolute;
			top: 0;
			left: 88rpx;
		}

		#search {
			/* width: 530rpx; */
			width: 462rpx;
			height: 60rpx;
			margin-left: 88rpx;
			border: 2rpx solid #FF892E;
			border-radius: 8rpx;
			float: left;
			padding-left: 68rpx;
		}

		.search>text {
			float: left;
			color: #FF892E;
			font-size: 32rpx;
			line-height: 60rpx;
			margin-left: 20rpx;
		}

		.main {
			width: 100%;
			height: auto;
			background-color: #F9F9F9;
		}

		.recommend,
		.select {
			width: 100%;
			height: auto;
			padding-top: 10rpx;
		}

		#recommend,
		#select {
			width: 224rpx;
			height: 42rpx;
			margin: 0 auto;
			display: block;
			margin-bottom: 40rpx;
		}

		.rec-box {
			width: 702rpx;
			height: 515rpx;
			box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			background: #fff;
			margin: 0 auto;
			margin-bottom: 30rpx;
			position: relative;
		}

		.rec-box:last-child {
			margin-bottom: 130rpx;
		}

		.activity {
			width: 160rpx;
			height: 50rpx;
			/* background:linear-gradient(183deg,rgba(255,151,47,1) 0%,rgba(255,46,46,1) 100%); */
			background-color: #249ef3;
			border-radius: 8rpx;
			position: absolute;
			top: 20rpx;
			right: -14rpx;
		}

		.activity>text {
			color: #fff;
			font-size: 24rpx;
			line-height: 50rpx;
			display: block;
			text-align: center;
		}

		.rec-img {
			width: 100%;
			height: 356rpx;
			position: relative;
			margin-bottom: 20rpx;
		}

		.rec-image {
			width: 100%;
			height: 100%;
		}

		.image-content {
			width: 100%;
			height: 58rpx;
			background: #000;
			opacity: 0.5;
			position: absolute;
			bottom: 0rpx;
			color: #fff;
		}

		.image-con-left {
			margin-left: 30rpx;
			font-size: 32rpx;
			line-height: 58rpx;
		}

		.image-con-right {
			float: right;
			margin-right: 10rpx;
			font-size: 24rpx;
		}

		.image-view {
			float: left;
			line-height: 58rpx;
			margin-right: 16rpx;
		}

		.image-view>.image-img {
			width: 32rpx;
			height: 32rpx;
			margin: 13rpx 0;
			float: left;
			margin-right: 10rpx;
		}

		.rec-content {
			width: 100%;
			height: 160rpx;
			position: relative;
		}

		.rec-title {
			margin-left: 30rpx;
		}

		.rec-title>text:first-child {
			width: 72rpx;
			height: 42rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 42rpx;
			text-align: center;
			margin-right: 20rpx;
			float: left;
			border-radius: 4rpx;
		}

		.type1 {
			background: linear-gradient(180deg, rgba(255, 191, 0, 1) 0%, rgba(255, 122, 39, 1) 100%);
		}

		.type2 {
			background: linear-gradient(180deg, rgba(71, 163, 255, 1) 0%, rgba(99, 63, 199, 1) 100%);
		}

		.type3 {
			background: linear-gradient(180deg, rgba(243, 77, 237, 1) 0%, rgba(135, 26, 230, 1) 100%);
		}

		.title {
			color: #333;
			font-size: 32rpx;
			line-height: 42rpx;
			display: block;
			width: 640rpx;
		}

		.rec-originator {
			position: absolute;
			bottom: 28rpx;
			width: 642rpx;
			margin: 0 30rpx;
		}

		.originator {
			width: auto;
			height: 60rpx;
			float: left;
			line-height: 72rpx;
		}

		.orig-image {
			width: 72rpx;
			height: 72rpx;
			margin-right: 22rpx;
			background-color: #EBEBEB;
			border-radius: 50%;
			float: left;
		}

		.orig-name {
			color: #999999;
			font-size: 24rpx;
			text-align: center;
			display: block;
			float: left;
		}

		.money {
			float: right;
		}

		.money>text:first-child {
			color: #FF2741;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 60rpx;
			float: left;
		}

		.money>.but {
			width: 170rpx;
			height: 60rpx;
			padding: 0;
			line-height: 60rpx;
			background: linear-gradient(180deg, rgba(238, 82, 73, 1) 0%, rgba(188, 11, 0, 1) 100%);
			border-radius: 8rpx;
			float: left;
			margin-left: 20rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.select {
			padding-bottom: 60rpx;
		}

		.select-box {
			width: 682rpx;
			height: 240rpx;
			padding: 24rpx 0 24rpx 20rpx;
			margin: 0 auto;
			box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			background-color: #fff;
			margin-bottom: 40rpx;
		}

		.select-image {
			width: 232rpx;
			height: 240rpx;
		}

		.select-content {
			width: 426rpx;
			height: 240rpx;
			margin-left: 24rpx;
			position: relative;
			float: right;
		}

		.select-con-title {
			color: #333;
			font-size: 24rpx;
			line-height: 32rpx;
			display: inline-block;
		}

		.progress {
			width: 100%;
			height: 28rpx;
			margin-top: 34rpx;
		}

		.progress>text {
			float: right;
			margin-right: 18rpx;
			color: #B8B8B8;
			font-size: 20rpx;
			line-height: 28rpx;
		}

		.evolve {
			float: left;
			width: 278rpx;
			height: 20rpx;
			border: 2rpx solid #FF2741;
			background-color: #FFD3D9;
			border-radius: 10rpx;
			position: relative;
		}

		.bar {
			width: 68%;
			height: 20rpx;
			background-color: #FF2741;
			border-radius: 10rpx;
		}

		.bar-number {
			color: #fff;
			font-size: 20rpx;
			line-height: 20rpx;
			width: 100%;
			display: inline-block;
			text-align: center;
			position: absolute;
			bottom: 0rpx;
			z-index: 100;
		}

		.select-con-but {
			width: 100%;
			height: 74rpx;
			position: absolute;
			bottom: 8rpx;
		}

		.con-but {
			width: 170rpx;
			height: 74rpx;
			border-radius: 8rpx;
			float: right;
			margin-right: 18rpx;
			color: #fff;
			font-size: 28rpx;
			padding: 0;
			line-height: 74rpx;
		}

		.discount {
			line-height: 48rpx;
			color: #FF2741;
			font-size: 36rpx;
			float: left;
		}

		.discount>text:first-child {
			font-size: 24rpx;
			font-weight: bold;
		}

		.discount>text:nth-child(2) {
			font-weight: bold;
		}

		.discount .original {
			color: #B8B8B8;
			font-size: 28rpx;
			margin-left: 10rpx;
			text-decoration: line-through;
		}

		.footer {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: center;
			background-color: #F9F9F9;
			margin-bottom: 120rpx
		}

		.comp #comp {
			width: 88rpx;
			height: 32rpx;
			float: left;
			margin: 14rpx 0;
		}

		.comp text {
			color: #BABABA;
			font-size: 24rpx;
			line-height: 60rpx;
			float: left;
			margin-left: 20rpx;
		}

		.make {
			position: fixed;
			bottom: 170rpx;
			/* background-color: #FF6A7C; */
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			z-index: 10000;
		}

		.make>text {
			width: 40rpx;
			height: 56rpx;
			color: #fff;
			font-size: 20rpx;
			margin: 22rpx 30rpx;
			display: block;
		}

		.make>image {
			width: 100rpx;
			height: 100rpx;
			color: #fff;
			font-size: 20rpx;
			display: block;
		}

		/* 导航 */
		.nav {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid #D8D8D8;
			background: #fff;
			position: fixed;
			bottom: 0rpx;
			display: flex;
			justify-content: space-around;
			z-index: 100000;
		}

		.nav-box>image {
			width: 52rpx;
			height: 52rpx;
			margin-top: 18rpx;
			display: block;
		}

		.nav-box text {
			color: #818181;
			font-size: 24rpx;
			line-height: 32rpx;
			display: block;
		}

		.recom {
			margin-bottom: 50rpx;
		}

		.recom-head {
			text-align: center;
			height: 50rpx;
			margin-top: 10rpx;
		}

		/* 分隔线 */
		.recom-title {
			display: table;
			width: 500rpx;
			line-height: 50rpx;
			white-space: nowrap;
			border-spacing: 2rem 0;
			font-size: 30rpx;
			color: #767676;
			margin: auto;
		}

		.recom-title::before,
		.recom-title::after {
			display: table-cell;
			content: "";
			width: 50%;
			background: linear-gradient(#959595, #959595) repeat-x center;
			background-size: 0.1rem 0.1rem;
		}

		/* 分隔线 */

		.recom-box {
			width: 702rpx;
			height: 460rpx;
			box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			background: #fff;
			margin: 30rpx auto;
			position: relative;
		}

		.recom-img {
			width: 100%;
			height: 356rpx;
			display: block;
			position: relative;
		}

		.recom-img>image {
			width: 100%;
			height: 100%;
			border-top-right-radius: 16rpx;
			border-top-left-radius: 16rpx;
		}

		.recom-T {
			margin-top: 40rpx;
		}

		.recom-text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.recom-content {
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0rpx;
			background: linear-gradient(#fff, #747d82, #000);
			opacity: 0.5;
			z-index: 100;
		}

		.recom-content2 {
			width: 100%;
			height: 135rpx;
			position: absolute;
			bottom: 10rpx;
			z-index: 1000;
		}

		.recom-cont {
			margin-left: 28rpx;
			width: 135rpx;
			height: 135rpx;
			display: block;
			float: left;
			border-radius: 50%;
		}

		.recom-con {
			float: left;
			height: 135rpx;
			width: 500rpx;
			display: block;
			margin-left: 30rpx;
		}

		.recom-con {
			/* color: #fff; */
			font-size: 24rpx;
			color: #fff;
		}

		.r-con>image {
			width: 45rpx;
			height: 45rpx;
			display: block;
			float: left;
			margin-right: 10rpx;
		}

		.r-con>text {
			width: 445rpx;
			display: block;
			float: left;
			line-height: 45rpx;
		}

		.r-text {
			line-height: 80rpx;
			font-size: 32rpx;
			width: 100%;
		}
	}

	//更多页面的样式===================
	.more {
		swiper {
			height: 560rpx;
		}

		.content {
			width: 100%;
			height: auto;
		}

		.head {
			width: 100%;
			height: 118rpx;
			line-height: 118rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
			color: #191919;
			font-size: 32rpx;
			background-color: #fff;
			position: fixed;
			top: 0;
			z-index: 100;
		}

		.main {
			width: 100%;
			/* max-height: 1200rpx; */
			min-height: 560rpx;
			padding: 30rpx 0;
			background-color: #f9f9f9;
			overflow: auto;
			margin-bottom: 130rpx;
			margin-top: 120rpx;
			-webkit-overflow-scrolling: touch;
		}

		.footer {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: center;
			background-color: #f9f9f9;
		}

		.comp #comp {
			width: 88rpx;
			height: 32rpx;
			float: left;
			margin: 14rpx 0;
		}

		.comp text {
			color: #bababa;
			font-size: 24rpx;
			line-height: 60rpx;
			float: left;
			margin-left: 20rpx;
		}

		.make {
			position: fixed;
			bottom: 170rpx;
			/* background-color: #FF6A7C; */
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.make>text {
			width: 40rpx;
			height: 56rpx;
			color: #fff;
			font-size: 20rpx;
			margin: 22rpx 30rpx;
			display: block;
		}

		.make>image {
			width: 100rpx;
			height: 100rpx;
			color: #fff;
			font-size: 20rpx;
			display: block;
		}

		.active {
			color: #ff892e;
			border-bottom: 6rpx solid #ff892e;
		}

		/* 导航 */
		.nav {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid #D8D8D8;
			background: #fff;
			position: fixed;
			bottom: 0rpx;
			display: flex;
			justify-content: space-around;
		}

		.nav-box>image {
			width: 52rpx;
			height: 52rpx;
			margin-top: 18rpx;
			display: block;
		}

		.nav-box text {
			color: #818181;
			font-size: 24rpx;
			line-height: 32rpx;
			display: block;
		}

		/*  */
		.activ-typeLayer {
			width: 100%;
			height: 1260rpx;
			position: fixed;
			top: 100rpx;
			z-index: 99;
			background: #fff;
			opacity: 0;
		}

		.activ-type {
			width: 100%;
			height: auto;
		}

		.Type {
			width: 100%;
			height: auto;
			background: #fff;
			box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
			position: fixed;
			z-index: 100;

		}

		.typeLeftBox {
			top: 0rpx;
			left: 0rpx;
			/* display: flex;
  justify-content: space-around; */
		}

		.typeRightBox {
			top: 125rpx;
			right: 0rpx;
		}

		.type-view {
			width: 160rpx;
			height: 90rpx;
			float: left;
			margin: 30rpx 0 0rpx 20rpx;
			/* background-color: #f5f5f5; */
		}

		/* .type-view:last-child{
  margin-bottom: 30rpx;
} */
		.type-view>text {
			/* width: 50%; */
			line-height: 90rpx;
			color: #010101;
			font-size: 30rpx;
			display: block;
			text-align: center;
		}

		.type-number {
			color: #BABABA;
		}

		.type-activ {
			background: #F1F1F1;
		}
	}

	/**=============我的===============**/

	.my {

		.content {
			width: 100%;
			height: auto;
			position: relative;
		}

		.head {
			width: 100%;
			height: 322rpx;
			background: linear-gradient(180deg, rgba(255, 188, 1, 1) 0%, rgba(255, 132, 33, 1) 100%);
		}

		.userinfo {
			height: 290rpx;
			padding: 16rpx 36rpx 32rpx 28rpx;
		}

		.userinfo-con1 {
			width: 100%;
			height: 144rpx;
			margin-bottom: 44rpx;
			position: relative;
		}

		#portrait {
			width: 144rpx;
			height: 144rpx;
			display: block;
			float: left;
			overflow: hidden;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 38rpx;
		}

		.userinfo-text {
			width: 505rpx;
			height: 48rpx;
			margin-bottom: 20rpx;
			float: left;
		}

		.userinfo-text:first-of-type {
			margin-top: 26rpx;
		}

		.userinfo-text>text {
			color: #F2F2F2;
			line-height: 48rpx;
		}

		.text1 {
			color: #F2F2F2;
			line-height: 48rpx;
			font-size: 32rpx;
			float: left;
		}

		#store {
			float: right;
			width: 145rpx;
			height: 48rpx;
			line-height: 48rpx;
			background-color: #7F5704;
			color: #F2F2F2;
			font-size: 24rpx;
			border-radius: 24rpx;
			text-align: center;
			padding: 0rpx;
		}

		.text3 {
			font-size: 28rpx;
			float: left;
		}

		.text4 {
			font-size: 28rpx;
			float: right;
			margin-right: 45rpx;
		}

		.userinfo-con2 {
			width: 100%;
			height: 63rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
		}

		.classif {
			height: 63rpx;
		}

		.classif>text {
			color: #F2F2F2;
			font-size: 24rpx;
			line-height: 32rpx;
			display: block;
			text-align: center;
		}

		.vertical {
			margin-top: 16rpx;
			border: 2rpx solid #F1F1F1;
		}

		.main {
			width: 100%;
			height: auto;
			background-color: #fff;
			box-shadow: 0rpx -10rpx 12rpx #FF9119;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin-top: -32rpx;
			margin-bottom: 120rpx;
		}

		.activity {
			height: 40rpx;
			line-height: 40rpx;
			padding: 40rpx 78rpx 24rpx 78rpx;
			position: relative;
			width: auto;
			background: none;
			top: 0;
			right: 0;
		}

		.activity>text {
			color: #333333;
			font-size: 28rpx;
			display: inline-block;
		}

		.activity>text:last-of-type {
			color: #999999;
			float: right;
			margin-right: 10rpx;
		}

		.divider {
			width: 685rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #F9F9F9;
		}

		.activity-classif {
			padding: 30rpx 78rpx;
			/* margin-bottom: 24rpx; */
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

		.activity-img {
			width: 112rpx;
			height: 112rpx;
			background-color: #BABABA;
			margin-bottom: 8rpx;
			display: block;
		}

		.activity-box1>text {
			color: #707070;
			font-size: 28rpx;
			line-height: 38rpx;
		}

		.activity-classif2 {
			padding: 0 50rpx;
		}

		.activity-box2 {
			padding: 26rpx 0;
			border-bottom: 2rpx solid #F9F9F9;
			position: relative;
		}

		.activity-box2>text {
			color: #333;
			font-size: 28rpx;
			line-height: 38rpx;
			margin-left: 90rpx;
		}

		.imgRight {
			width: 24rpx;
			height: 24rpx;
			display: block;
			float: right;
			padding: 8rpx 0;
			margin-right: 0;
		}

		.activity-current {
			padding: 16rpx 0;
			margin: 0 68rpx;
			height: 68rpx;
			line-height: 68rpx;
			background-color: #FFEED9;
			border-radius: 8rpx;
		}

		.current-img {
			width: 68rpx;
			height: 68rpx;
			margin: 0 20rpx;
			background: #fff;
			display: block;
			float: left;
		}

		.title {
			color: #707070;
			font-size: 28rpx;
		}

		.time {
			color: #FF2741;
			margin-left: 10rpx;
		}

		.current {
			width: 150rpx;
			height: 60rpx;
			margin-top: 4rpx;
			background: #FF892E;
			padding: 0;
			color: #fff;
			font-size: 28rpx;
			line-height: 60rpx;
			float: right;
			margin-right: 20rpx;
		}

		#login {
			position: absolute;
			top: 50rpx;
			left: 150rpx;
			width: 195rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #fff;
			border-radius: 30rpx;
			padding: 0;
			text-align: center;
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #000;
			z-index: 990;
			opacity: 0.6;
		}

		.login-layer {
			width: 100%;
			height: 100%;
			/* background: #0e0d0dd5; */
			position: absolute;
			top: 0;
			z-index: 10000;
		}

		.login {
			width: 500rpx;
			height: 250rpx;
			background: #fff;
			position: absolute;
			top: 450rpx;
			left: 125rpx;
		}

		.login>text {
			display: block;
			text-align: center;
			font-size: 32rpx;
			line-height: 42rpx;
		}

		.login>text:first-child {
			margin: 20rpx 0;
		}

		.login-but {
			position: absolute;
			bottom: 20rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
			width: 100%;
		}

		.login-but>button {
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0;
			border-radius: 30rpx;
			background: #E9C9AF;
		}

		/* 导航 */
		.nav {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid #D8D8D8;
			background: #fff;
			position: fixed;
			bottom: 0rpx;
			display: flex;
			justify-content: space-around;
		}

		.nav-box>image {
			width: 52rpx;
			height: 52rpx;
			margin-top: 18rpx;
			display: block;
		}

		.nav-box text {
			color: #818181;
			font-size: 24rpx;
			line-height: 32rpx;
			display: block;
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #000;
			z-index: 990;
			opacity: 0.6;
		}

		.modal {
			position: absolute;
			top: 40%;
			width: 80%;
			left: 10%;
			right: 10%;
			text-align: center;
			z-index: 996;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.title {
			padding: 0 15rpx;
		}

		.modal .btn {
			line-height: 2;
			color: #32cd32;
		}

		.none {
			display: none;
		}

		.primary-btn {
			padding: 60rpx 30rpx;
		}

		.imgLeft {
			width: 48rpx;
			height: 48rpx;
			display: block;
			float: left;
			position: absolute;
			left: 20rpx;
			top: 26rpx;
		}
	}
</style>
